<template>
<view>
	<!--首页-轮播图-->   
	<view class='ad01'>
	  <!--image src='/static/tupian/01.jpg' class='ad01-img'></image-->
	  <swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
		<swiper-item v-for="img in imgs">
			<image :src="img" mode="widthFix" style="width: 100%;"></image>
		</swiper-item>
	  </swiper>
	</view>  

<!--首页-区块标题-->
<view class='qukuai'>
  <view class='qukuai-shuxian'></view>
  <text class='qukuai-biaoti'>公司简介</text>
  <navigator class='qukuai-gengduo' url=''>more></navigator>
</view>
<view class="jianjie">
	<rich-text :nodes="jianjie"></rich-text>
</view>


<!--首页-区块标题-->
<view class='qukuai'>
  <view class='qukuai-shuxian'></view>
  <text class='qukuai-biaoti'>最新产品</text>
  <navigator class='qukuai-gengduo' url=''>more></navigator>
</view>
<!--首页-最新产品（1行2列流式布局）-->
<view class='cp_zuixin'>
  <navigator :url="'/pages/b/cp_info/cp_info?cp_id='+cp.id+ '&cp_mc='+cp.title" class='cp-xiangmu' v-for="cp in cps" :key="cp.id">
    <image :src='cp.img' class='cp_tupian' mode='widthFix'></image>
    <text class='cp-biaoti'>{{cp.title}}</text>
  </navigator>
</view>

<!--首页-区块标题-最新案例--> 
<view class='qukuai'>
  <view class='qukuai-shuxian'></view>
  <text class='qukuai-biaoti'>最新案例</text>
  <navigator class='qukuai-gengduo' url=''>more></navigator>
</view>
<!--首页-最新案例-->
<navigator :url="'/pages/c/anli_info/anli_info?cp_id='+anli.id+ '&cp_mc='+anli.title" class='anli' v-for="anli in anlis">
  <image :src='anli.img' mode='widthFix' class='anli-tupian'></image>
  <view class='anli_jieshao'>
    <text class='anli_biaoti1'>{{anli.title}}</text>
    <text class='anli_biaoti2'>时间：{{anli.shijian}}</text>
    <text class='anli_biaoti3'>说明：{{anli.shuoming}}</text>
  </view>
</navigator>

<!--首页-区块标题-最新资讯-->
<view class='qukuai'>
  <view class='qukuai-shuxian'></view>
  <text class='qukuai-biaoti'>最新资讯</text>
  <navigator class='qukuai-gengduo' url=''>more></navigator>
</view>
<!--首页-最新资讯-->
<navigator class='zixun'  v-for="zx in zixuns"
	:url="'/pages/d/zixun_info/zixun_info?cp_id='+zx.id+ '&cp_mc='+zx.title"
>
  <text class='zixun_biaoti'>{{zx.title}}</text>
  <image src='/static/tupian/right.png' class='zixun_tubiao'></image>
</navigator>


		
</view>
</template>

<script>
	export default {
		data() {
			return {
				imgs:[],
				jianjie:"",
				cps:[],
				anlis:[],
				zixuns:[]
			}
		},
		onLoad() {
			//console.log(this.$WebURL.WebUrl.phpweb)
			this.GetBanner();
			this.GetGsjj();
			this.GetCP();
			this.GetAnli();
			this.GetZixun();
		},
		methods: {
			//轮播图
			GetBanner:function(){
				uni.request({
					url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_getbanner.php",
					success:(res)=>{
						//console.log(res.data)
						this.imgs = res.data
					}
				})
			},
			//公司简介 this.$WebURL.WebUrl.phpweb + "/h5/wx_api_gsJianJie.php"
			GetGsjj:function(){
				uni.request({
					url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_gsJianJie.php",
					success: (e) => {
						// this.jianjie =e.data
						this.jianjie = "公司的组织形式。以营利为目的的社团法人。在资本主义社会获得高度发展。我国在建国后对私营公司进行了社会主义改造。国营工、商、建筑、运输等部门中实行独立经济核算的经营管理组织和某些城市中按行业划分的专业管理机构，也通称公司。近年来随着我国经济体制的改革，享有法人资格的各种公司纷纷设立，按章程从事自身的生产经营活动。"
					}
				})
			},
			//最新产品 url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_CpList_top4.php",
			GetCP:function(){
				uni.request({
					url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_CpList_top4.php",
					success: (res) => {
						this.cps = res.data
					}
				})
			},
			//最新案例  this.$WebURL.WebUrl.phpweb + "/h5/wx_api_AnLi_top4.php"
			GetAnli:function(){
				uni.request({
					url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_AnLi_top4.php",
					success: (res) => {
						this.anlis = res.data
					}
				})
			},
			//最新资讯 this.$WebURL.WebUrl.phpweb + "/h5/wx_api_News_top3.php"
			GetZixun:function(){
				uni.request({
					url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_News_top3.php",
					success: (res) => {
						this.zixuns = res.data
					}
				})
			}
			
		}
	}
</script>

<style>
/*广告图*/ 
.ad01 {
  margin: 4px;
  box-shadow: 0px 2px 2px gainsboro;
}
 
.ad01-img {
  width: 100%;
  height: 125px;
}

/*区块标题-最新产品*/
.qukuai {
  display: flex;
  margin: 2px;
  background-color: aliceblue;
  align-items: center;
}
.qukuai-shuxian {
  width: 3px;
  height: 15px;
  background-color: green;
  margin: 5px;
  box-shadow: 2px 2px 2px gainsboro;
}
.qukuai-biaoti {
  color: gray;
  text-shadow: 2px 2px 2px gainsboro;
  flex: 1;
  margin-left: 1px;
  align-self: center;
}
.qukuai-gengduo {
  color: gray;
  text-shadow: 2px 2px 2px gainsboro;
}

/*最新产品（1行2列流式布局）*/
.cp_zuixin {
  display: flex;
  flex-wrap: wrap;
}
.cp-xiangmu {
  width: 50%;
  display: flex;
  padding: 3px;
  box-sizing: border-box;
  flex-direction: column;
}
.cp_tupian {
  width: 100%;
}
.cp-biaoti {
  font-size: 14px;
  color: gray;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*最新案例（1行2列-右列分3行）*/
.anli {
  display: flex;
  border-bottom: 1px dotted gray;
}
.anli-tupian {
  width: 80px;
  margin: 5px;
  border: 2px solid gainsboro;
}
.anli_jieshao {
  display: flex;
  flex-direction: column;
  margin-left: 3px;
}
.anli_biaoti1 {
  font-size: 16px;
}
.anli_biaoti2 {
  font-size: 12px;
  color: gray;
  margin-top: 5px;
  margin-bottom: 5px;
}
.anli_biaoti3 {
  font-size: 14px;
  color: grey;
}

/*最新资讯*/

.zixun {
  display: flex;
  border-bottom: 1px solid gainsboro;
}

.zixun_biaoti {
  flex-grow: 1;
  padding: 5px;
  align-items: center;
}

.zixun_tubiao {
  width: 16px;
  height: 16px;
  align-self: center;
}
.jianjie{padding: 5px; text-indent: 2em;}
</style>
